<template>
  <div class="echarts">
    <div class="title-top">
      <div class="left">
        <i class="line"></i>
        <p class="text">数据统计</p>
      </div>
      <i class="el-icon-close" @click="close"></i>
    </div>
    <div class="content">
      <div :id="'echarts'+index" class="echarts-content" v-for="item,index in  echartsData" :key="index"></div>
      <!-- <div id="echarts1" class="echarts-content"></div>
      <div id="echarts2" class="echarts-content"></div>
      <div id="echarts3" class="echarts-content"></div>
      <div id="echarts4" class="echarts-content"></div> -->
    </div>
  </div>
</template>

<script>
import * as API from '../../../../api/resourceManagement/index'
// import { Bus } from '@/utils/eventBus'
export default {
  data() {
    return {
      echartsData: []
    }
  },
  mounted() {
    // Bus.$on('getEcharts', val => {
    // API.mapCountByParent().then(res => {
    //   if (res.code === 200) {
    //     this.echartsData = res.data

    //     this.$nextTick(() => {
    //       this.getEcharts1(res.data)
    //     })
    //   }
    // })
    // })
    // this.getEcharts1()
    // this.getEcharts2()
    // this.getEcharts3()
    // this.getEcharts4()
    this.getMapCountByParent()
  },
  methods: {
    close() {
      this.$emit('close')
    },
    getMapCountByParent() {
      API.mapCountByParent().then(res => {
        if (res.code === 200) {
          this.echartsData = res.data

          this.$nextTick(() => {
            this.getEcharts1(res.data)
          })
        }
      })
    },
    getEcharts1(data) {
      let myEcharts
      for (let index = 0; index < data.length; index++) {
        myEcharts = this.$echarts.init(document.getElementById(`echarts${index}`))
        myEcharts.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            textStyle: {
              color: '#FFFFFF'
            }
          },
          series: [
            {
              type: 'pie',
              radius: ['60%', '80%'],
              center: ['50%', '45%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  formatter: `{d|${data[index].supName}}\n{b|${data[index].supTotal}}`,
                  rich: {
                    b: {
                      color: '#fff',
                      fontSize: 16
                    },
                    d: {
                      color: '#fff',
                      fontSize: 14,
                      lineHeight: 20
                    }
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: data[index].subMap
            }
          ]
        })
        window.addEventListener('resize', () => {
          myEcharts.resize()
        })
      }
    },
    getEcharts2() {
      const myEcharts = this.$echarts.init(document.getElementById('echarts2'))
      myEcharts.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#FFFFFF'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: '{a|救援队伍}\n{b|200}',
                rich: {
                  a: {
                    color: '#fff',
                    fontSize: 14,
                    lineHeight: 20
                  },
                  b: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '政府救援队伍' },
              { value: 1048, name: '企业救援队伍' }
            ]
          }
        ]
      })
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    },
    getEcharts3() {
      const myEcharts = this.$echarts.init(document.getElementById('echarts3'))
      myEcharts.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#FFFFFF'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: '{d|救灾物资}\n{b|300}',
                rich: {
                  b: {
                    color: '#fff',
                    fontSize: 16
                  },
                  d: {
                    color: '#fff',
                    fontSize: 14,
                    lineHeight: 20
                  }
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '政府救援物资' },
              { value: 1048, name: '企业救援物资' }
            ]
          }
        ]
      })
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    },
    getEcharts4() {
      const myEcharts = this.$echarts.init(document.getElementById('echarts4'))
      myEcharts.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: '#FFFFFF'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: '{d|应急避难场所}\n{b|300}',
                rich: {
                  b: {
                    color: '#fff',
                    fontSize: 16
                  },
                  d: {
                    color: '#fff',
                    fontSize: 14,
                    lineHeight: 20
                  }
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '大型' },
              { value: 1048, name: '中型' },
              { value: 1048, name: '小型' }
            ]
          }
        ]
      })
      window.addEventListener('resize', () => {
        myEcharts.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts{
  position: absolute;
  // top: 3%;
  top:77px;
  right: 26px;
  z-index: 1;
  width: 400px;
  height: calc(100vh - 160px);
  background: linear-gradient(90deg, #031B36 0%, rgba(3,28,51,0.3) 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(0, 48, 76, 1), rgba(0, 48, 76, 1)) 1 1;
  .title-top{
    display: flex;
    justify-content: space-between;
    line-height: 46px;
    align-items: center;
    background: #000000 url('@/assets/img/tjtitle.png') no-repeat;
    background-size: 100% 100%;
    width: 400px;
    height: 46px;
    .left{
      height: 100%;
      display: flex;
      align-items: center;
      // .line{
      //   height: 60%;
      //   width: 5px;
      //   display: inline-block;
      //   background: #4989ef;
      //   margin-right: 10px;
      //   margin-left: 5px;
      // }
      .text{
        font-size: 14px;
        color: #c3d4fd;
        text-indent: 60px;
        font-size: 20px;
      }
    }
    .el-icon-close{
      margin-right: 5px;
      cursor: pointer;
      color: #fff;
    }
  }
  .content{
    height: calc(100% - 0.46rem);
    overflow: auto;
    .echarts-content{
      width: 100%;
      height: 23%;
      margin-bottom: 3%;

    }
  }
}
</style>
